<template>
  <div class="feedback">
    <div v-show="success" class="success">反馈提交成功</div>
    <masklayer v-show="masklayer" @close="closemask" @success="successtips"></masklayer>
    <span @click="gomask()">
      <i class="icon-font icon-tubiao15"></i>
      <p>意见反馈</p>
    </span>
    <span>
      <i class="icon-font icon-erweima"></i>
      <p>客服微信</p>
    </span>
    <img class="animated bounce" src="../assets/images/footwechat.jpg" alt="">
  </div>
</template>

<script>
  import masklayer from './masklayer'
  export default {
    name: 'feed-back',
    data () {
      return {
        masklayer: false,
        success: false
      }
    },
    components: {
      masklayer
    },
    methods: {
      gomask () {
        this.masklayer = true
      },
      closemask (val) {
        this.masklayer = false
      },
      successtips () {
        this.masklayer = false
        this.success = true
        setTimeout(() => {
          this.success = false
        }, 2000)
      }
    }
  }
</script>

<style lang="scss">
.feedback{
  display: flex;
  width: 48px;
  flex-flow: column;
  /*position: relative;*/
  .success{
    width: 200px;
    height: 30px;
    background: rgba(0,186,145,.8);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: white;
    text-align: center;
    line-height: 30px;
    position: fixed;
    top: 60px;
    left: calc(50% - 100px)
  }
  img{
    width: 100px;
    display: none;
    position: absolute;
    right: 100px;
    top: 0;
  }
  span{
    width: 48px;
    height: 48px;
    display: flex;
    background: white;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dde3;
    position: relative;
    cursor: pointer;

    &:nth-child(3){
      border-bottom: none;
    }
    i{
      font-size: 30px;
      color: #8e9ca9;
    }
    p{
      width: 100%;
      height: 100%;
      padding: 7px;
      font-size: 16px;
      display: none;
    }
    &:hover i{
      display: none;
    }
    &:hover p{
      display: block;
      background: #00ba91;
      color: white;
    }
    &:nth-child(4):hover + img{
    display: block;
    }
  }
}
</style>
